<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人信息</title>
    <!--bootstrap-select  css文件-->
    <link rel="stylesheet" type="text/css" href="js/bootstrapselect/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="js/bootstrapselect/css/bootstrap-select.css"/>
    <!--日期  css文件-->
    <link rel="stylesheet" type="text/css" href="js/datepicker/css/bootstrap-datepicker.css">
    <!--弹窗 css文件-->
    <link rel="stylesheet" type="text/css" href="js/layer/layer.css">
    <!--图片点击放大  css文件-->
    <link rel="stylesheet" href="js/viewer/css/viewer.min.css">
    <!--主要css样式-->
    <link rel="stylesheet" type="text/css" href="css/models.css">
    <style>
        .addList li .bootstrap-select.btn-group:not(.input-group-btn), .addList li .bootstrap-select.btn-group[class*="col-"] {
            width: 15%;
        }
        .addList li input[type="text"], .addList li input[type="password"] {
            width:31%;
        }
        .addList li {
            margin-bottom: 21px;
        }
        .js_addhuntBtn{
            margin-top: 5px;
        }
    </style>
</head>
<body>
<!--添加编辑资讯弹窗-->
<div class="MainContent">
    <div class="MainCont">
        <form id="formID">
            <ul class="addList">
                <li>
                    <label for="">企业名称：</label>
                    <input class="validate[required]" name="" type="text" placeholder="XXX有限公司">
                </li>
                <li>
                    <label for="">批发商账号：</label>
                    <input class="ph_disabled" name="" disabled="disabled" type="text" placeholder="1511837954">
                </li>
                <li>
                    <label for="">所属代理：</label>
                    <input class="ph_disabled" name="" disabled="disabled" type="text" placeholder="XXX代理商">
                </li>
                <li>
                    <label for="">联系电话：</label>
                    <input class="validate[required]" name="" type="text" placeholder="1511837954">
                </li>
                <li>
                    <label for="">联系地址：</label>
                    <select class="selectpicker validate[required]">
                        <option value="">请选择省</option>
                        <option value="">重庆</option>
                        <option value="">四川</option>
                    </select>
                    <select class="selectpicker validate[required]">
                        <option value="">请选择市</option>
                        <option value="">重庆</option>
                        <option value="">成都</option>
                    </select>
                    <select class="selectpicker validate[required]">
                        <option value="">请选择省</option>
                        <option value="">重庆</option>
                        <option value="">四川</option>
                    </select>
                    <select class="selectpicker validate[required]">
                        <option value="">请选择市</option>
                        <option value="">重庆</option>
                        <option value="">成都</option>
                    </select>
                </li>
                <li>
                    <label for=""></label>
                    <input name="" type="text" placeholder='请输入详细地址' class="validate[required]"/>
                </li>
                <li>
                    <label for="">行业分类：</label>
                    <p class="ph_add_headhunt"><input
                            class="butMarTop js_addhuntBtn industry" name="" type="button" value="添加分类"></p>
                </li>
                <li>
                    <label for="">配送区域：</label>
                    <p class="ph_add_headhunt"><input
                            class="butMarTop js_addhuntBtn area" name="" type="button" value="添加区域"></p>
                </li>
                <li>
                    <label for="" class="addImgTit">营业执照：</label>
                    <div class="filePhoto uploadImg">
                        <section class="up-section">
                            <img class="up-img zoom-img" src="images/bg.jpg"/>
                        </section>
                        <section class="up-section">
                            <img class="up-img zoom-img" src="images/bg.jpg"/>
                        </section>
                        <section class="up-section">
                            <img class="up-img zoom-img" src="images/bg.jpg"/>
                        </section>
                    </div>
                </li>
                <li>
                    <label for="" class="addImgTit">法人身份证：</label>
                    <div class="filePhoto uploadImg">
                        <section class="up-section">
                            <img class="up-img zoom-img" src="images/bg.jpg"/>
                        </section>
                        <section class="up-section">
                            <img class="up-img zoom-img" src="images/bg.jpg"/>
                        </section>
                    </div>
                </li>
                <li>
                    <label for="" class="addImgTit">其他证件：</label>
                    <div class="filePhoto uploadImg">
                        <section class="fileBox left">
                            <img src="images/add.png" class="add-img">
                            <input type="file" name="file" id="file" class="fileImg" value=""
                                   accept="image/jpg,image/jpeg,image/png,image/bmp" multiple/>
                        </section>
                    </div>
                </li>
            </ul>
        </form>
        <div class="PopupBtn">
            <input class="submit" name="" value="保存" type="button">
        </div>
    </div>
</div>
<!--end 添加编辑资讯弹窗-->
<!--添加行业标签弹窗-->
<div class="PopupBox" id="ph_LabelBox_industry">
    <!--内容-->
    <div class="PopupCon">
        <form id="">
            <ul class="addList labelBox industry_list">
                <li><a href="javascript:void(0)" data-val="c1">行业分类1</a></li>
                <li><a href="javascript:void(0)" data-val="c2">行业分类2</a></li>
                <li><a href="javascript:void(0)" data-val="c3">行业分类3</a></li>
                <li><a href="javascript:void(0)" data-val="c4">行业分类4</a></li>
                <li><a href="javascript:void(0)" data-val="c5">行业分类5</a></li>
                <li><span>行业分类6(灰)</span></li>
                <li><a href="javascript:void(0)" data-val="c7">行业分类7</a></li>
                <li><a href="javascript:void(0)" data-val="c8">行业分类8</a></li>
                <li><a href="javascript:void(0)" data-val="c9">行业分类9</a></li>
                <li><a href="javascript:void(0)" data-val="c10">行业分类10</a></li>
                <li><a href="javascript:void(0)" data-val="c11">行业分类11</a></li>
                <li><a href="javascript:void(0)" data-val="c12">行业分类12</a></li>
                <li><a href="javascript:void(0)" data-val="c13">行业分类13</a></li>
                <li><a href="javascript:void(0)" data-val="c14">行业分类14</a></li>
                <li><a href="javascript:void(0)" data-val="c15">行业分类15</a></li>
                <li><a href="javascript:void(0)" data-val="c16">行业分类16</a></li>
            </ul>
        </form>
    </div>
    <!--end 内容-->
</div>
<!--end 添加行业标签弹窗-->
<!--添加区域弹窗-->
<div class="PopupBox" id="ph_LabelBox_area">
    <!--内容-->
    <div class="PopupCon">
        <form id="">
            <ul class="addList labelBox">
                <li>
                    <select class="selectpicker select_One validate[required]" data-live-search="true">
                        <option value="0">全部</option>
                        <option value="1">冻结</option>
                        <option value="2">正常</option>
                    </select>
                    <select name="advplaceID" id="advplaceID_area" class="selectpicker select_Two validate[required]"
                            multiple data-live-search="true">
                        <option value="0">全部</option>
                        <option value="1">冻结</option>
                        <option value="2">正常</option>
                        <option value="3">sdfds</option>
                        <option value="4">正sdffwwe常</option>
                        <option value="5">冻sdfsdf结</option>
                        <option value="6">正aadf常</option>
                        <option value="7">冻dfwwrr结</option>
                        <option value="8">正23123常</option>
                        <option value="9">冻442结</option>
                        <option value="10">正asd常</option>
                        <option value="11">冻asd123结</option>
                        <option value="12">正asd311常</option>
                        <option value="13">冻adasd1结</option>
                        <option value="14">正13123123常</option>
                        <option value="15">冻a13dasd1结</option>
                        <option value="16">正12313常</option>
                        <option value="17">冻asdasd123结</option>
                        <option value="18">正123123常</option>

                    </select>
                </li>
                <li></li>
            </ul>
        </form>
    </div>
    <!--end 内容-->
</div>
<!--end 添加区域弹窗-->
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<!--bootstrap-select-->
<script type="text/javascript" src="js/bootstrapselect/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrapselect/bootstrap-select.js"></script>
<script type="text/javascript" src="js/bootstrapselect/select.js"></script>
<!--验证-->
<script type="text/javascript" src="js/validat/jquery.validationEngine-zh_CN.js"></script>
<script type="text/javascript" src="js/validat/jquery.validationEngine.js"></script>
<!--图片上传-->
<script type="text/javascript" src="js/imgUp.js"></script>
<!--分页-->
<script type="text/javascript" src="js/pages/jquery.dataTables.min.js"></script>
<!--弹窗-->
<script type="text/javascript" src="js/layer/layer.js"></script>
<!--图片点击放大-->
<script src="js/viewer/viewer-jquery.min.js"></script>

<script type="text/javascript">
    $(function () {
        //行业分类标签缓存
        var cTxt=[];
        $('.industry_list').on('click','a',function () {
            $(this).parent().toggleClass('industry_actived');
        })

        $("#formID").validationEngine({
            addPromptClass: 'formError-text',
            showArrow: false,
            promptPosition: 'bottomLeft:10 0'
        });
        //图片点击放大
        $('.zoom-img').viewer({
            url: 'src',
            navbar: false,
            keyboard: true,
            title: true
        });
        //图片上传
        $("#file").takungaeImgup({
            formData: {
                'module': 'product',
                'name': 'url',
                'filesname': 'urlfile'
            },
            url: 'http://123.206.8.92:7000/web/attachment/uploadProductImage',
            maxImage: 5,
            success: function (data) {

            },
            error: function (err) {
                layer.alert(err, {icon: 2, btnAlign: 'c', closeBtn: 0});
            }
        });
        $(".select_One,.select_Two").selectpicker('refresh', '');
        var childTxt, childVal, labelTxt;//获取选择的猎头标签信息
        //猎头下拉框选择赋值
        $('select[name="advplaceID"]').on('change', function () {
            //多选文本取值
            childTxt = $(this).parents('.PopupBox').find('.select_Two button').attr('title');
            //标签id取值
            childVal = $(this).val();
            //标签文本缓存
            labelTxt = childTxt.split(",");
        });
        //区域添加方法
        function addHunter(txt, val,classify) {
            var stxt = txt.split(",");
            var sval = String(val).split(",");
            for (var i = 0; i < stxt.length; i++) {
                var html = '<span class="addLabel" id="' + sval[i] + '">' + stxt[i] + '<i class="addLabelClose">x</i></span>';
                $(classify).before(html);
            }
        }

        //添加猎头标签
        $('.addList').on('click', '.js_addhuntBtn', function () {
            var labelArr = [];//已添加标签缓存数组
            var layerObj,titleName,className;//弹窗实体
            var classify=$(this).hasClass('industry');
            if(classify){
                titleName='添加行业标签';
                layerObj=$('#ph_LabelBox_industry');
                className='.industry';
            }else{
                titleName='添加区域标签';
                layerObj=$('#ph_LabelBox_area');
                className='.area';
            }
            var obj = $('.addLabel');
            //有标签存在就缓存已有id值
            if (obj) {
                for (var i = 0; i < obj.length; i++) {
                    var currentId = obj.eq(i).attr('id');
                    labelArr.push(currentId);
                }
            }
            //判断已有标签，是否达到最大限制
            if (labelArr.length <10) {
                layer.open({
                    type: 1,
                    title: titleName,
                    closeBtn: 1,
                    area: ['540px', '320px'],
                    btn: ['确定', '取消'],
                    btnAlign: 'c',
                    content: layerObj,
                    yes: function (index) {
                        //剔除重复项
                        for (var i = 0; i < childVal.length; i++) {
                            for (var j = 0; j < labelArr.length; j++) {
                                if (labelArr[j] == childVal[i]) {
                                    labelTxt.splice(i, 1);
                                    childVal.splice(i, 1);
                                }
                            }
                        }
                        //统计非重复项和已存在标签总和是否达到最大限制
                        var count =labelTxt.length+labelArr.length;
                        //对非重复项执行操作
                        if (labelTxt.length > 0) {
                            labelTxt = labelTxt.join(',');
                        }else{
                            layer.msg('当前选择项均重复，请重新选择');
                            $('.select_Two').selectpicker('val','');
                            $('.select_Two').selectpicker('refresh','');
                        }
                        if (count <= 10) {
                            addHunter(labelTxt, childVal,className);
                            //添加后的清空操作
                            layer.close(index);
                        } else {
                            layer.msg('最多添加10个猎头标签，请重试');
                        }
                        $(".select_One,.select_Two").selectpicker('val', '');
                        $(".select_One,.select_Two").selectpicker('refresh', '');
                    }
                });
            } else {
                layer.msg('已达到最大标签数量10个，无法继续添加');
            }
        });
        $('.ph_add_headhunt').on('click', '.addLabelClose', function () {
            $(this).parent().remove();
        })
    });
</script>
</body>
</html>